<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel="stylesheet" href="js/Bootstrap.css">
<link rel="stylesheet" href="js/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="js/jquery.mobile.icons.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
<script src="js/tools.js"></script>       
<script type="text/javascript" charset="utf-8">
	var myEvent;
	var src;		//呼叫來源網頁
	// Wait for device API libraries to load
	//
	$(document).ready(onLoad);
	function onLoad() {
		document.addEventListener("deviceready", onDeviceReady, false);
		
		var id = getURLQueryString("id");
		if(id != "")
		{
			//初始化設定：載入資料庫事件
			db.transaction(function(tx)
			{
				var insertSql = "SELECT * FROM EVENTS WHERE id = ?";
				tx.executeSql(insertSql,[id],function(tx,results) {
						myEvent = results.rows.item(0);
						var m_date = new Date(myEvent['date']);
						pickedTime = pickedDate = m_date;
						$("#txtDate").val(String.format("{0} . {1} . {2}",m_date.getFullYear(),
									String.padLeft(m_date.getMonth()+1,2),String.padLeft(m_date.getDate(),2)));
						$("#txtTime").val(String.format("{0} : {1}", String.padLeft(m_date.getHours(),2),
									String.padLeft(m_date.getMinutes(),2)));
						$("#txtTitle").val(myEvent['logTitle']);
						$("#txtRecord").val(myEvent['log']);
					});
			});
			//顯示刪除按扭
			$("#btnDel").css("display","block");
		}else
		{
			var year = getURLQueryString("y"), month = getURLQueryString("m"), day = getURLQueryString("d");
			var m_date = new Date(year,month,day);
			pickedTime = pickedDate = m_date;
			$("#txtDate").val(String.format("{0} . {1} . {2}",m_date.getFullYear(),
									String.padLeft(m_date.getMonth()+1,2),String.padLeft(m_date.getDate(),2)));
			$("#txtTime").val(String.format("{0} : {1}", String.padLeft(m_date.getHours(),2),
									String.padLeft(m_date.getMinutes(),2)));
		}
		
		//調整返回位置
		src = getURLQueryString("s") == "" ? "index.html" : getURLQueryString("s");
		$("#btnCancel").attr("href",src);

		//事件處理：儲存資料
		$("#btnSave").click(function(){
			if(myEvent){
				//Update data
				db.transaction( function(tx)
				{
					var insertSql = "UPDATE EVENTS SET date=?, logTitle=?, log=? WHERE id=?";
					
					var date = new Date();
					date.setTime(pickedTime.getTime());
					date.setFullYear(pickedDate.getFullYear(),pickedDate.getMonth(),pickedDate.getDate());

					tx.executeSql(insertSql, [getDBDateString(date), $("#txtTitle").val(), $("#txtRecord").val(), myEvent['id']]);					
				});
			}else{
				// insert data
				db.transaction( function(tx)
				{
					var date = new Date();
					date.setTime(pickedTime.getTime());
					date.setFullYear(pickedDate.getFullYear(),pickedDate.getMonth(),pickedDate.getDate());
				
					var insertSql = "INSERT INTO EVENTS (Date, logTitle, log) VALUES ('"
					 + getDBDateString(date) + "','" 
				 	+ $("#txtTitle").val() + "'"+ ",'" 
				 	+ $("#txtRecord").val() +"')";
					tx.executeSql(insertSql);
				});
			}
			window.location.href = src;
		});
		
		//事件處理：刪除資料
		$("#btnDel").click(function(){
			// delete data
			db.transaction( function(tx)
			{
				var insertSql = "DELETE FROM EVENTS WHERE id = ?" ;
				tx.executeSql(insertSql, [myEvent['id']]);
			});
			window.location.href = src;
		});

	}
	// device APIs are available
	// deviceready事件處理函數，PhoneGap完成載入後調用該函數
	function onDeviceReady() {

	}
	var pickedDate;
	function pickDate()
	{
		if(!pickedDate)	{pickedDate = new Date(); }
		var options = {	
		date: pickedDate,
		mode: 'date'
		};
		datePicker.show(options, function(m_date){
  			pickedDate = m_date;
			$(txtDate).val(String.format("{0} . {1} . {2}",m_date.getFullYear(),
									String.padLeft(m_date.getMonth()+1,2),String.padLeft(m_date.getDate(),2)));
		});
	}
	var pickedTime;
	function pickTime()
	{
		if(!pickedTime)	{pickedTime = new Date(); }
		var options = {
		date: pickedTime,
		mode: 'time'
		};
		datePicker.show(options, function(n_date){
			pickedTime = n_date;
			$(txtTime).val(String.format("{0} : {1}",String.padLeft(n_date.getHours(),2), String.padLeft(n_date.getMinutes(),2)));
  		});
	}
	function inputDate()
	{
		var time = prompt("Please enter the Time",new Date());
		var myTime = new Date(time);
		if (myTime != null) 
		{
			$("#txtDate").val(String.format("{0} . {1} . {2}", myTime.getFullYear(),
			String.padLeft(myTime.getMonth()+1),2),String.padLeft(myTime.getDate(),2));
		}
	}
	// create database
	var db = window.openDatabase('Calendar', '0.1', 'AceCalendar', 200000);
</script>
<script type="text/javascript" charset="utf-8">
	function getDBDateString(date)
	{
		//JAVAScript Data Month start with 0, so getMonth(July)=6, but new Date(str) should use "2014-07-01"
		var strDate = String.format("{0}-{1}-{2} {3}:{4}:{5}", date.getFullYear(),
				String.padLeft(date.getMonth()+1,2), String.padLeft(date.getDate(),2),
				String.padLeft(date.getHours(),2), String.padLeft(date.getMinutes(),2), 
				String.padLeft(date.getSeconds(),2));
		return strDate;
	}
</script>
<style type="text/css">
#eventDetal {
	background-image:url(img/EventDetalBG.png);
}
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
	padding: 0px 5px;
	margin: -5px 0px;
	height:auto;
}
.dayWidget {
	width: 97%;
	padding: 0 0.3em;
}
table td{
	border-bottom:  3px dashed #9C9C9C;
	padding:0.2em 0;
}
.ui-mobile label{
	font-family:'Comic Sans MS', cursive;
	font-size:1em;
}
.ui-page-theme-a .ui-body-inherit{
	border:none;
	background-color: rgba(0, 0, 0, 0.0);
	font-size: 1.5em;
}
#txtRecord {
	min-height:5em;
}
</style>
<title>行事曆細項</title>
</head>
<body>
<div id="eventDetal" data-role="page">
  <div class="ui-header" style="background: rgba(245,245,245,0.5);padding:5px;" data-role="header" data-position="fixed">
  	<h1 id="lbListMonth" style="color:black;border:5px double black;border-radius:10px;">標題‧記事</h1>
  </div>
  <!-- /header -->
  <div role="main" class="ui-content">
  	<div id="dayWidget">
    	<table width="100%" cellspacing="0">
          <tr>
            <td style="min-width:70px"><img style="float:left;" src="img/time.png"><label for="txtDate">日期</label></td>
            <td><input name="txtDate"  id="txtDate" value="" onclick="pickDate()" type="text"></td>
          </tr>
           <tr>
            <td><img style="float:left;" src="img/time.png"><label for="txtTime">時間</label></td>
            <td><input name="txtTime" id="txtTime" value="" onClick="pickTime()" type="text"></td>
          </tr>
          <tr>
            <td><img style="float:left;" src="img/title.png"><label for="txtTitle">標題</label></td>
            <td><input name="txtTitle" id="txtTitle" value="" type="text"></td>
          </tr>
          <tr>
            <td><img style="float:left;" src="img/logo.png"><label for="txtRecord">記事</label></td>
            <td><textarea name="txtRecord" style="font-size:1em;background-color:rgba(245,245,245,0.5);" id="txtRecord" value=""></textarea></td>
          </tr>          
        </table>
    </div>
    <!-- /dayWidget -->
    <div class="ui-grid-b">
      <div class="ui-block-a">
        <button style="font-size: 1.2em;padding: 0.2em inherit; text-shadow:0;" class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('和某人有聚餐');$('#txtRecord').val('姓名：\r地點：\r重點：');">聚餐</button>
      </div>
      <div class="ui-block-b">
        <button style="font-size: 1.2em;padding: 0.2em inherit; text-shadow:0;" class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('打電話給某人');$('#txtRecord').val('姓名：\r電話：\r重點：');">電話</button>
      </div>
      <div class="ui-block-c">
        <button style="font-size: 1.2em;padding: 0.2em inherit; text-shadow:0;" class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('有重要的會議');$('#txtRecord').val('主題：\r地點\r');">開會</button>
      </div>
      <div class="ui-block-a">
        <button style="font-size: 1.2em;padding: 0.2em inherit; text-shadow:0;" class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('有重要的約會');$('#txtRecord').val('姓名：\r地點\r');">約會</button>
      </div>
      <div class="ui-block-b">
        <button style="font-size: 1.2em;padding: 0.2em inherit; text-shadow:0;" class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('與客戶有約');$('#txtRecord').val('姓名：\r地點\r');">客戶</button>
      </div>
      <div class="ui-block-c">
        <button style="font-size: 1.2em;padding: 0.2em inherit; text-shadow:0;" class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('與廠商有約');$('#txtRecord').val('姓名：\r地點\r');">廠商</button>
      </div>
    </div>
    <!-- /grid-b -->
    <div class="ui-grid-a">
    	<div class="ui-block-a">
        	<a href="index.html" id="btnCancel" data-ajax="false" class="ui-btn ui-btn-a ui-corner-all">取消</a>
        </div>
    	<div class="ui-block-b">
        	<button id="btnSave" class="ui-btn ui-btn-a ui-corner-all">確認</button>
        </div>
    	<button id="btnDel" style="display:none" class="ui-btn ui-btn-c ui-corner-all">刪除</button>
    </div>   
    <!-- /grid-b -->


  <!-- /content --> 
  
</div>
<!-- /page -->
</body>
</html>
